<template>
    <div class="number-range-select">
        <a-input-group compact class="input-group">
            <a-input-number v-model:value="editValue.min.value" />
            <a-select v-model:value="editValue.min.type">
                <a-select-option
                    v-for="(operatorValue, operatorKey) in leftOperators"
                    :key="operatorValue"
                    :value="operatorValue"
                >
                    {{ operatorKey }}
                </a-select-option>
            </a-select>
        </a-input-group>
        <span class="value-label">{{ t('value') }}</span>
        <a-input-group compact class="input-group">
            <a-select v-model:value="editValue.max.type">
                <a-select-option
                    v-for="(operatorValue, operatorKey) in rightOperators"
                    :key="operatorValue"
                    :value="operatorValue"
                >
                    {{ operatorKey }}
                </a-select-option>
            </a-select>
            <a-input-number v-model:value="editValue.max.value" />
        </a-input-group>
    </div>
</template>

<script lang="ts">
    import { defineComponent, ref, watch } from 'vue'
    import { useI18n } from 'vue-i18n'

    export default defineComponent({
        props: {
            value: {
                type: Object,
                default: () => ({
                    min: { type: 'GT', value: undefined },
                    max: { type: 'LT', value: undefined }
                })
            }
        },
        setup(props) {
            const { t } = useI18n()

            const leftOperators = { '<': 'GT', '<=': 'GE' }
            const rightOperators = { '<': 'LT', '<=': 'LE' }

            const editValue = ref()

            watch(
                () => props.value,
                () => {
                    if (editValue.value !== props.value) {
                        editValue.value = props.value
                    }
                },
                {
                    immediate: true
                }
            )

            // 暴露给外部组件，用于验证
            function validate() {
                const { min, max } = editValue.value
                if ((min.value !== 0 && !min.value) || (max.value !== 0 && !max.value)) {
                    return Promise.reject(t('placeholderInput'))
                }
                if (min.value >= max.value) {
                    return Promise.reject(t('minGreaterThanMax'))
                }
                return Promise.resolve(true)
            }

            return {
                leftOperators,
                rightOperators,
                editValue,

                t,
                validate
            }
        }
    })
</script>

<style lang="less" scoped>
    .number-range-select {
        display: flex;
        align-items: center;

        .input-group {
            display: flex;
        }

        .value-label {
            margin: 0 5px 0 5px;
        }
    }
</style>

<i18n>
zh-CN:
  value: '值'
  minGreaterThanMax: '左值要小于右值'
</i18n>
